<template>
  <a-modal
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    class="banner"
    @cancel="handleCancel"
    cancelText="关闭"
    footer
    style="color: rgb(138, 223, 252);"
    :closable="false"
  >
  <a-spin :spinning="confirmLoading" class="top">
      <a-form :form="form">
        <a-row class="topbannner" :style="topbannner">
          <a-col :span="1"></a-col>

          <a-col :span="4" class="tital">行政区规划维护</a-col>
          <a-col :span="18"></a-col>
          <a-col :span="1" @click="big" v-if="showbig" style="color: #38c3c8;line-height: 42px;">
            <img src="../../../assets/images/fangda.png" style="width: 20px;" />
          </a-col>
          <a-col :span="1" @click="big" v-if="!showbig" style="color: #38c3c8;line-height: 42px;">
            <img src="../../../assets/images/suoxiao.png" style="width: 20px;" />
          </a-col>
        </a-row>
        <a-row class="everyrow" :style="lsstyle">
          <a-col :span="1"></a-col>
          <a-col :span="15">
             <a-form-item v-show="!isEditor" :labelCol="labelCol" :wrapperCol="wrapperCol" label="行政区名称">
           <v-region @values="regionChange" class="form-control" v-decorator="['name', {}]"></v-region>
        </a-form-item>
        <a-form-item v-show="isEditor" :labelCol="labelCol" :wrapperCol="wrapperCol" label="行政区名称">
           <v-region @values="regionChange" v-model="wrapp" class="form-control" v-decorator="['name', {}]"></v-region>
        </a-form-item>
          </a-col>
          
        </a-row>
        <a-row :style="lsstyle" class="everyrow">
          <a-col :span="1"></a-col>

          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拼音码">
          <a-input placeholder="请输入拼音码" v-decorator="['pinyinCode', {rules:[{ required: true,message: '请输入拼音码'}]}]" />
        </a-form-item>
          </a-col>
          <a-col :span="11">
             <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="行政区代码">
          <a-input placeholder="请输入行政区代码" v-decorator="['parentId', {rules:[{ required: true,message: '请输入行政区代码'}]}]" />
        </a-form-item>
          </a-col>
        </a-row>
        <div class="btn-out">
          <a-row>
            <a-col :span="19"></a-col>
            <button class="btn" @click="handleOk">保存</button>
            <button class="btn btn1" @click="handleCancel">取消</button>
          </a-row>
        </div>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'

export default {
  name: 'DictAdmDivisionModal',
  data() {
    return {
      name: '',
      key: '',
      title: '操作',
      visible: false,
      bodyinner: true,
      showbig: true,
      visible: false,
      topbannner: {},
      lsstyle: {},
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      cityKey: "",
      isEditor: false,//判断是否为编辑
      wrapperColText: "",//城市全名
      wrapKey: {},
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      wrapp: {},
      url: {
        add: '/dicts/dictAdmDivision/add',
        edit: '/dicts/dictAdmDivision/edit'
      }
    }
  },
  created() {
    
    this.wrapp = {
      province: '350000',
      city: '350100',
      area: '350104',
      town: '350104008'
    }
  },
  methods: {
    big() {
      this.showbig = !this.showbig
      if (this.showbig) {
        document.querySelector('.btn-out').style.marginTop = '0px'
        document.querySelector('.banner').style.width = '800px'
        this.lsstyle = { 'margin-top': '-15px' }
      } else {
        document.querySelector('.banner').style.width = '100%'
        document.querySelector('.btn-out').style.width = '100%'
        document.querySelector('.btn-out').style.marginTop = '30px'
        // document.querySelector('.everyrow').style = '30px'
        this.lsstyle = { 'margin-top': '20px' }
        this.topbannner = { width: '100%', 'margin-bottom': '50px' }
      }
    },
    add() {
      this.edit({})
    },
    
    edit(record,sign) {
      if(sign == "编辑"){
        let province = record.dicCode.split('-')[0];
        let city = record.dicCode.split('-')[1];
        let area = record.dicCode.split('-')[2];
        this.isEditor = true;
        this.wrapp = {
          province: province,
          city: city,
          area: area,
          town: '350104008'
        }
        
      }else{
        this.isEditor = false;
        this.wrapp = {
          province: '123',
          city: '345',
          area: '123',
          town: '350104008'
        }
      }
      
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(this.model, 'name', 'parentId', 'sortId', 'pinyinCode', 'serialNum', 'operator', 'opeType')
        )
        //时间格式化
        this.form.setFieldsValue({ opeDate: this.model.opeDate ? moment(this.model.opeDate) : null })
      })
    },
    regionChange(data) {
      this.name = data.province.value + data.city.value + data.area.value;
      this.cityKey = data.province.key + '-' + data.city.key + "-" + data.area.key;
      this.sortId = data.area.key
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        var lever = /^[a-zA-Z]+$/
        var lever1 = /^[0-9]+$/
        if (!lever.test(values.pinyinCode)) {
          that.$message.warning('请正确填写拼音码')
          return
        }
        if (!lever1.test(values.parentId)) {
          that.$message.warning('请正确填写行政区代码')
          return
        }
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          formData.name = this.name
          formData.sortId = this.sortId
          //时间格式化
          formData.opeDate = formData.opeDate ? formData.opeDate.format('YYYY-MM-DD HH:mm:ss') : null
          formData.dicCode = this.cityKey;
          httpAction(httpurl, formData, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/zkxhadd.less';
</style>